```svelte
<script lang="ts">
  import * as navigationMenu from "@zag-js/navigation-menu"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(navigationMenu.machine, { id })
  const api = $derived(navigationMenu.connect(service, normalizeProps))
</script>

<nav {...api.getRootProps()}>
  <div {...api.getIndicatorTrackProps()}>
    <ul {...api.getListProps()}>
      <!-- Item with trigger -->
      <li {...api.getItemProps({ value: "products" })}>
        <button {...api.getTriggerProps({ value: "products" })}>
          Products
        </button>
        <!-- Focus management proxies -->
        <span {...api.getTriggerProxyProps({ value: "products" })} />
        <span {...api.getViewportProxyProps({ value: "products" })} />
      </li>

      <!-- Simple link -->
      <li {...api.getItemProps({ value: "pricing" })}>
        <a {...api.getLinkProps({ value: "pricing" })} href="/pricing">
          Pricing
        </a>
      </li>

      <!-- Indicator -->
      <div {...api.getIndicatorProps()}>
        <div {...api.getArrowProps()} />
      </div>
    </ul>
  </div>

  <!-- Shared viewport for all content -->
  <div {...api.getViewportPositionerProps()}>
    <div {...api.getViewportProps()}>
      <!-- Content for products -->
      <div {...api.getContentProps({ value: "products" })}>
        <a {...api.getLinkProps({ value: "products" })} href="/analytics">
          Analytics
        </a>
        <a {...api.getLinkProps({ value: "products" })} href="/marketing">
          Marketing
        </a>
      </div>
    </div>
  </div>
</nav>
```
